<template>
	<fill-height-scroll-view @scroll = "getScroll">
		<template slot="element">
			<!-- 顶部导航 start -->
			<view class="f-x-bt bf p03">
				<scroll-view v-if="sarr.length" class='ws-n sarr pt10 bf' scroll-x='true'>
					<block v-for="(v,i) in sarr" :key='i'>
						<view @click="clickSarr(i)" class='f-g-0 mr15 bs10 c6 dis-in sarri f28 t-c'
							:class="{wei:v.active}"
							:style="{background:v.active?`rgba(${cTR(tColor)},1)`:'',color:v.active?'#ffffff':'#000'}">
							{{v.name}}</view>
					</block>
				</scroll-view>
				<view class="t-r" style="width: 200rpx;">
					<u-action-sheet :list="date" v-model="showDate" @click="selectDate"></u-action-sheet>
					<view @click="showDate = true">{{dateTitle}}
						<text class="iconfont icondown wei c0 f24 ml5"></text>
					</view>
				</view>
			</view>
			<!-- 顶部导航 end -->
				<view class="p3 bf  mt20">
					<view class="w100 f-bt">
						<view class="title f32">订单渠道</view>
					</view>
					<view class="charts-ring">
					  <qiun-data-charts
						canvasId="Payring2"
						:canvas2d="true" 
						:pageScrollTop="pageScrollTop"
						type="ring"
						:chartData="showData.channel"
						:opts="{title:{name: '总金额'},subtitle:{name:channelTotal||'0'}}"
						background="none"
						:tooltipShow="false"
						:tapLegend="false"
					  />
					</view>
				</view>
				
				<view class="p3 bf  mt20">
					<view class="w100 f-bt">
						<view class="title f32">支付占比</view>
					</view>
					<view class="charts-ring">
					  <qiun-data-charts
						canvasId="Payring3"
						:canvas2d="true" 
						:pageScrollTop="pageScrollTop"
						type="ring"
						:chartData="showData.payRate"
						:opts="{title:{name: '总金额'},subtitle:{name:payRateTotal||'0'}}"
						background="none"
						:tooltipShow="false"
						:tapLegend="false"
					  />
					</view>
				</view>
			<view class="p3 bf mt20">
				<view class="w100 f-bt">
					<view class="title f32">支付占比</view>
					<view class="c6">查看详情></view>
				</view>
				<view class="cardList">
					<view class="card" v-for="(item,index) in showList" :key="item.name"
						@click="choose(index)">
						<text class="f26">{{item.name}}</text>
						<text class="f34 mt20">{{item.num}}</text>
						<text class="ca2 f24">{{item.rateName}}<text class="cfa">{{item.rate}}</text></text>
					</view>
				</view>
				<view class="qiun-charts cell mt30">
					 <qiun-data-charts
						canvasId="Paymix"
						:canvas2d="true"
						:inScrollView="true"
						:opts="{xAxis:{labelCount:5}}"
						type="mix" 
						:chartData="LineData" 
						background="#FFFFFF" 
						:tooltipShow="false"
						@getIndex="getIndex"/>
						<!-- tooltip start -->
						<view class="tooltip" v-if="showTooltip">
							<view>{{tooltopData.title}}</view>
							<view v-for="item in tooltopData.data" :key="item.name" class="f-s-c">
								<view :style="{background:item.color}"
									style="width: 26rpx;height: 26rpx;border-radius: 50%;margin-right: 10rpx;"></view>
								<text>{{item.name}}</text>
								<text>{{item.value}}</text>
							</view>
						</view>
						<!-- tooltip end-->
				</view>
			</view>
			<u-calendar v-model="showrl" mode="range" :btnstyle="{ background: '#FE9367' }" range-color="#FE9367"
				range-bg-color="rgba(253,215,75,0.2)" active-bg-color="#FE9367" @change="changeDate"></u-calendar>
		</template>
	</fill-height-scroll-view>
</template>

<script>
	import {
		utilMixins
	} from "@/common/util-mixins.js"
	import uCharts from '@/yb_shd/dp/components/js_sdk/u-charts/u-charts.js'
	import qiunDataCharts from '@/yb_shd/dp/components/qiun-data-charts/qiun-data-charts.vue'
	import FillHeightScrollView from '@/yb_shd/dp/components/fill-height-scroll-view.vue'
	export default {
		components: {
			qiunDataCharts,
			FillHeightScrollView
		},
		mixins: [utilMixins],
		data() {
			return {
				showTooltip:false,
				tooltopData:{},
				channelTotal: 0,
				payRateTotal: 0,
				showrl:false,
				showDate: false,
				orderType: 1,
				pageScrollTop:0,
				LineData: null, //图表对象数据
				ringData:null,
				ringDataTotal:0,
				query: {
					timeType: 1,
					startTime: '',
					endTime: ''
				},
				totalList:{
					inList:[{name:'营业总额',num:0,rateName:'总订单数：',rate:0},{name:'微信支付金额',num:0,rateName:'支付占比：',rate:0},
						{name:'支付宝支付金额',num:0,rateName:'支付占比：',rate:0},{name:'余额支付金额',num:0,rateName:'支付占比：',rate:0},
						{name:'现金付款金额',num:0,rateName:'支付占比：',rate:0},{name:'自有支付金额',num:0,rateName:'支付占比：',rate:0}
					],
					outList:[
						{name:'营业总额',num:0,rateName:'总订单数：',rate:0},{name:'微信支付金额',num:0,rateName:'支付占比：',rate:0},
						{name:'支付宝支付金额',num:0,rateName:'支付占比：',rate:0},{name:'余额支付金额',num:0,rateName:'支付占比：',rate:0},
						{name:'货到付款支付金额',num:0,rateName:'支付占比：',rate:0}
					],
				},
				date: [
					{text: '今日',value: 1}, {text: '近七日',value: 2},
					{text: '近十五日',value: 3}, {text: '具体时间',value: 4}
				],
				dateTitle: '今日',
				chartData:{
					outData:{
						channel:{series:[{data: [{name: '外卖订单', value: 0 },{name: '自提订单', value: 0 }]}]},
						payRate:{series:[{data: [{name: '微信支付', value: 0 },{name: '支付宝支付', value: 0 },{name: '余额支付', value: 0 },{name: '货到付款', value: 0 }]}]}
					},
					inData:{
						channel:{series:[{data: [{name: '堂食订单', value: 0 },{name: '快餐订单', value: 0 }]}]},
						payRate:{series:[{data: [{name: '微信支付', value: 0 },{name: '支付宝支付', value: 0 },{name: '余额支付', value: 0 },{name: '现金支付', value: 0 },{name: '自有支付', value: 0 }]}]}
					}
				},
				sarr: [{name: '外卖',active: true,type: 1}, {name: '店内',active: false,type: 2}],
			}
		},
		computed:{
			showData(){
				return this.orderType === 1 ? this.chartData.outData : this.orderType === 2?this.chartData.inData:{}
			},
			showList(){
				return this.orderType === 1 ? this.totalList.outList : this.orderType === 2?this.totalList.inList:{}
			}
		},
		created() {
			this.fetchData()
		},
		methods: {
			async fetchData() {
				try {
					let {
						data
					} = await this.util.request({
						'url': this.orderType === 1 ? this.api.takeOutIndexPay : this.api.inStoreIndexPay,
						data: this.query
					})
					this.result = data
					var key = this.orderType === 1?'outList':'inList'
					this.totalList[key][0].num = data.allMoney
					this.totalList[key][0].rate = data.all
			
					this.totalList[key][1].num = data.weChatPayMoney
					this.totalList[key][1].rate = data.weChatPayProportion
			
					this.totalList[key][2].num = data.aliPayMoney
					this.totalList[key][2].rate = data.aliPayProportion
			
					this.totalList[key][3].num = data.balancePayMoney
					this.totalList[key][3].rate = data.balancePayProportion
					if(key === 'outList'){
						this.totalList[key][4].num = data.onDeliveryMoney
						this.totalList[key][4].rate = data.onDeliveryProportion
					}else{
						this.totalList[key][4].num = data.cashMoney
						this.totalList[key][4].rate = data.cashProportion
						this.totalList[key][5].num = data.haveMoney
						this.totalList[key][5].rate = data.haveProportion
					}
					
					this.getChartData(data)
				} catch (e) {
					this.util.message(e.msg, 3)
				}
			},
			getIndex(e) {
				console.log(e)
				if (this.showTooltip) {
					return
				}
				var index = e.currentIndex.index
				if(index === -1){
					return
				}
				var tooltopData = {}
				// 外卖
				if(this.orderType === 1){
					tooltopData = {
						title: this.result.allPayArr[index].hours,
						data: [
							// {
							// 	color: e.opts.color[0],
							// 	name: '营业总额：',
							// 	value: this.result.allPayArr[index].money
							// },
							{
								color: e.opts.color[1],
								name: '微信支付金额：',
								value: this.result.weChatPayArr[index].money
							},
							{
								color: e.opts.color[2],
								name: '支付宝支付金额：',
								value: this.result.aliPayArr[index].money
							},
							{
								color: e.opts.color[3],
								name: '余额支付金额：',
								value: this.result.balancePayArr[index].money
							},
							{
								color: e.opts.color[4],
								name: '货到付款金额：',
								value: this.result.onDeliveryArr[index].money
							},
						]
								
					}
				}else if(this.orderType === 2){
					// 店内
					tooltopData = {
						title: this.result.allPayArr[index].hours,
						data: [
							// {
							// 	color: e.opts.color[0],
							// 	name: '营业总额：',
							// 	value: this.result.allPayArr[index].money
							// },
							{
								color: e.opts.color[1],
								name: '微信支付金额：',
								value: this.result.weChatPayArr[index].money
							},
							{
								color: e.opts.color[2],
								name: '支付宝支付金额：',
								value: this.result.aliPayArr[index].money
							},
							{
								color: e.opts.color[3],
								name: '余额支付金额：',
								value: this.result.balancePayArr[index].money
							},
							{
								color: e.opts.color[4],
								name: '现金支付金额：',
								value: this.result.cashArr[index].money
							},
							{
								color: e.opts.color[5],
								name: '自有支付金额：',
								value: this.result.haveArr[index].money
							}
						]
								
					}
				}
				
				this.tooltopData = tooltopData
				this.showTooltip = true
				setTimeout(() => {
					this.showTooltip = false
				}, 2000)
			},
			changeDate(e) {
				this.query.startTime = e.startDate
				this.query.endTime = e.endDate
				this.fetchData()
			},
			selectDate(i) {
				this.dateTitle = this.date[i].text
				this.query.timeType = this.date[i].value
				if (this.query.timeType != 4) {
					this.fetchData()
				} else {
					//具体时间
					this.showrl = true
				}
			},
			getScroll(e){
				this.pageScrollTop = e.detail.scrollTop
			},
			choose(index) {
				this.list.forEach((item, i) => {
					if (index === i) {
						item.active = true
					} else {
						item.active = false
					}
				})
			},
			getChartData(data) {
				var key = this.orderType === 1?'outData':'inData'
				var LineData = {
					categories: [],
					series: []
				};
				LineData.categories = data.allPayArr.map(element => {
					return element.hours.replace(/(\d{4})-/, '')
				})
				// 营业总额
				var totalMoney = data.allPayArr.map(element => {
					return element.money
				})
				if(this.orderType === 1){
					// 微信支付金额
					var weChatPayMoney = data.weChatPayArr.map(element => {
						return element.money
					})
					// 支付宝支付金额
					var aliPayMoney = data.aliPayArr.map(element => {
						return element.money
					})
					// 余额支付金额
					var balancePayMoney = data.balancePayArr.map(element => {
						return element.money
					})
					// 货到付款支付金额
					var onDeliveryMoney = data.onDeliveryArr.map(element => {
						return element.money
					})
					// 折线图
					LineData.series = [
					// 	{
					// 	name: "营业总额",
					// 	data: totalMoney,
					// 	color: '#63b2ee',
					// 	"type": "line",
					// 	"style": "curve",
					// 	legendShape:'square'
					// },
					{name: "微信支付金额",
						data: weChatPayMoney,
						color: '#76da91',
						"type": "line",
						"style": "curve",
						legendShape:'square'
					},{
						name: "支付宝支付金额",
						data: aliPayMoney,
						color: '#f8cb7f',
						"type": "line",
						"style": "curve",
						legendShape:'square'
					},
					{
						name: "余额支付金额",
						data: balancePayMoney,
						color: '#f89588',
						"type": "line",
						"style": "curve",
						legendShape:'square'
					},
					{
						name: "货到付款支付金额",
						data: onDeliveryMoney,
						color: '#7cd6cf',
						"type": "line",
						"style": "curve",
						legendShape:'square'
					}]
					// 圆环图
					this.channelTotal = ((+this.result.delivery) + (+this.result.self)).toFixed(2)
					this.payRateTotal = ((+this.result.weChatPayMoney) + (+this.result.aliPayMoney) + (+this.result.balancePayMoney) + (+this.result.onDeliveryMoney)).toFixed(2)
					this.chartData[key].channel.series[0].data[0].value = +this.result.delivery
					this.chartData[key].channel.series[0].data[1].value = +this.result.self
					
					this.chartData[key].payRate.series[0].data[0].value = +this.result.weChatPayMoney
					this.chartData[key].payRate.series[0].data[1].value = +this.result.aliPayMoney
					this.chartData[key].payRate.series[0].data[2].value = +this.result.balancePayMoney
					this.chartData[key].payRate.series[0].data[3].value = +this.result.onDeliveryMoney
				}else if(this.orderType === 2){
					// 微信支付金额
					var weChatPayMoney = data.weChatPayArr.map(element => {
						return element.money
					})
					// 支付宝支付金额
					var aliPayMoney = data.aliPayArr.map(element => {
						return element.money
					})
					// 余额支付金额
					var balancePayMoney = data.balancePayArr.map(element => {
						return element.money
					})
					// 现金付款支付金额
					var cashMoney = data.cashArr.map(element => {
						return element.money
					})
					// 自有付款支付金额
					var haveMoney = data.haveArr.map(element => {
						return element.money
					})
					// 折线图
					LineData.series = [
					// 	{
					// 	name: "营业总额",
					// 	data: totalMoney,
					// 	color: '#63b2ee',
					// 	"type": "line",
					// 	"style": "curve",
					// 	legendShape:'square'
					// },
					{name: "微信支付金额",
						data: weChatPayMoney,
						color: '#76da91',
						"type": "line",
						"style": "curve",
						legendShape:'square'
					},{
						name: "支付宝支付金额",
						data: aliPayMoney,
						color: '#f8cb7f',
						"type": "line",
						"style": "curve",
						legendShape:'square'
					},
					{
						name: "余额支付金额",
						data: balancePayMoney,
						color: '#f89588',
						"type": "line",
						"style": "curve",
						legendShape:'square'
					},
					{
						name: "现金付款支付金额",
						data: cashMoney,
						color: '#7cd6cf',
						"type": "line",
						"style": "curve",
						legendShape:'square'
					},
					{
						name: "自有付款支付金额",
						data: haveMoney,
						color: '#9192ab',
						"type": "line",
						"style": "curve",
						legendShape:'square'
					}]
					// 圆环图 缺少订单渠道数据
					this.channelTotal = ((+this.result.inStore) + (+this.result.fast)).toFixed(2)
					this.payRateTotal = ((+this.result.weChatPayMoney) + (+this.result.aliPayMoney) + (+this.result.balancePayMoney) + (+this.result.cashMoney)+ (+this.result.haveMoney)).toFixed(2)
					this.chartData[key].channel.series[0].data[0].value = +this.result.inStore
					this.chartData[key].channel.series[0].data[1].value = +this.result.fast
					
					this.chartData[key].payRate.series[0].data[0].value = +this.result.weChatPayMoney
					this.chartData[key].payRate.series[0].data[1].value = +this.result.aliPayMoney
					this.chartData[key].payRate.series[0].data[2].value = +this.result.balancePayMoney
					this.chartData[key].payRate.series[0].data[3].value = +this.result.cashMoney
					this.chartData[key].payRate.series[0].data[4].value = +this.result.haveMoney
				}
				this.LineData = LineData
			},
			clickSarr(index) {
				this.sarr.forEach((item, i) => {
					if (i === index) {
						item.active = true
						this.orderType = item.type
						this.fetchData()
					} else {
						item.active = false
					}
				})
			}
		}

	}
</script>

<style scoped lang="scss">
	.title {
		position: relative;
		margin-left: 20rpx;
		font-weight: bold;
		color: #000;
	}
	.title::after{
		content: "";
		position: absolute;
		width: 10rpx;
		height: 20rpx;
		left: -20rpx;
		top: 50%;
		transform: translateY(-50%);
		background: #FE9367;
	}
	.cardList {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		font-size: 30rpx;
		.card{
			display: flex;
			flex-direction: column;
			width: 48%;
			height: 160rpx;
			background: #FFFFFF;
			border: 1px solid #ccc;
			margin-top: 20rpx;
			border-radius: 10rpx;
			justify-content: center;
			padding: 20rpx;
		}
		.card-inactive {
			display: flex;
			flex-direction: column;
			width: 220rpx;
			height: 160rpx;
			background: #FFFFFF;
			border: 1px solid #ccc;
			margin-top: 20rpx;
			border-radius: 10rpx;
			justify-content: center;
			padding: 20rpx;
		}
		.card-active {
			display: flex;
			flex-direction: column;
			width: 220rpx;
			height: 160rpx;
			background: #FEFAED;
			margin-top: 20rpx;
			border: 1px solid #E3BD76;
			border-radius: 10rpx;
			justify-content: center;
			padding: 20rpx;
			font-weight: bold;
		}
	}
	.analysis{
		display: flex;
		flex-direction: column;
		width: 220rpx;
		height: 160rpx;
		margin-top: 20rpx;
		justify-content: center;
	}
	.qiun-charts {
		width: 730rpx;
		height: 500rpx;
		background-color: #FFFFFF;
		margin-left: -40rpx;
	}
	.charts-ring{
		margin: 0 auto;
		width: 600rpx;
		height: 350rpx;
		background-color: #FFFFFF;
	}
	.tooltip {
		position: absolute;
		left: 50%;
		top: 40%;
		transform: translate(-50%, -50%);
		width: 400rpx;
		padding: 20rpx 30rpx;
		border-radius: 20rpx;
		background-color: rgba(0, 0, 0, .9);
		color: #FFFFFF;
	}
</style>
